<template>
  <el-drawer
    :size="size"
    title="我是标题"
    :visible="show"
    @close="handleClose"
    :with-header="false"
  >
    <div class="flexbet fileline">
      <div class="flex">
        <el-link style="margin-left: -20px;margin-right: 8px" @click="switchFullShow" :underline="false" type="primary">
          <i :class="fullShow?'el-icon-right':'el-icon-back'"></i>
          {{ fullShow?'关闭':'全屏' }}
        </el-link>
        <img :src="returnIcon(url,type)" alt=""/>
        <div class="overtxt filename">{{ name }}</div>
      </div>
    </div>
    <video
      controlsList="nodownload"
      v-if="url.indexOf('.mp4') !== -1 || url.indexOf('.webm') !== -1"
      class="docWrap"
      id="vide"
      :src="url"
      controls="controls"
    >
      您的浏览器不支持 video 标签。
    </video>
    <el-image
      @click="handleClose"
      v-else-if="
        url.indexOf('.gif') !== -1 ||
        url.indexOf('.png') !== -1 ||
        url.indexOf('.jpg') !== -1 ||
        url.indexOf('.jpeg') !== -1
      "
      class="docWrap"
      fit="contain"
      :src="url"
      :preview-src-list="[url]"
      alt=""
    ></el-image>
    <iframe
      v-else-if="
        url.indexOf('.pdf') !== -1 ||
        url.indexOf('.PDF') !== -1
      "
      class="iframeurl"
      :src="url"
    ></iframe>
    <iframe
      v-else-if="isHttps"
      class="iframeurl"
      :src="url"
    ></iframe>
    <iframe
      v-else
      class="iframeurl"
      :src="'https://vip.ow365.cn/?i=32269&ssl=1&furl=' + url"
    ></iframe>
  </el-drawer>
</template>

<script>
import vabOnlyOffice from "@/components/doc.vue";
import { returnIcon } from "@/utils/util.js";
export default {
  name: "app",
  components: {vabOnlyOffice},
  data() {
    return {
      fullShow:false,
      size:'680px',
      option: {
        url: "",
        isEdit: "",
        fileType: "",
        title: "",
        lang: "",
        isPrint: "",
        user: { id: null, name: "" },
      },
      returnEncodeURIComponent: function (url) {
        return "https://view.xdocin.com/view?src=" + encodeURIComponent(url);
      },
      returnIcon: function (url,type) {
        console.log(url,type);
        return returnIcon(url,type);
      },
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    isHttps: {
      type: Boolean,
      default: false,
    },
    name: String,
    type: {
      type: [String, Number],
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
  },
  watch: {

  },
  mounted() {},
  methods: {
    switchFullShow(){
      this.fullShow=!this.fullShow
      if (this.fullShow){
        this.size='100%'
      }else {
        this.size='680px'
      }
    },
    handleClose() {
      var vide = document.getElementById("vide");
      if (vide) {
        vide.pause();
      }
      this.$emit("update:show", false);
    },
  },
};
</script>

<style scoped lang='scss'>
.qualityManual-container {
  padding: 0 !important;
  height: calc(100% - 120px);
}
.qualityManual-container-office {
  width: 100%;
  height: calc(100% - 120px);
}
.docWrap {
  background: #333333;
  width: 100%;
  height: calc(100% - 124px);
  overflow-x: auto;
}
::v-deep .el-drawer {
  transition: all ease 0.5s;
}

.fileline {
  margin: 15px 18px 15px 32px;

  img {
    width: 27px;
    height: 32px;
  }

  .filename {
    margin-left: 18px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    width: 333px;
  }
}

.iframeurl {
  width: 100%;
  height: calc(100% - 124px);
}
</style>
